<template>
  <!-- 把标签里面所有内容，在页面上给我渲染到 .sdy-header 这个标签里面 -->
  <Teleport to=".sdy-header">
    <van-nav-bar :title="title" :left-arrow="back">
      <template #left>
        <slot name="left">
          <van-icon class="back-btn" name="arrow-left" />
        </slot>
      </template>
      <template #title>
        <slot name="title">{{ title }}</slot>
      </template>
        <template #right>
        <slot name="right"></slot>
      </template>
    </van-nav-bar>
  </Teleport>
</template>

<script setup lang="ts">
  import { defineProps } from 'vue'

  interface MyTopBar {
    title: string,
    back?: boolean
  }
  // 接受父组件传递的数据
  defineProps<MyTopBar>()

</script>

<style scoped lang="scss">
@import '@/styles/variable.scss';
// 覆盖样式
// 样式穿透，让该样式在自己组件内生效
// 写了一个 scoped 是为了让样式在自己组件内生效
// 但是有些内容不在当前组件内
:deep(.van-nav-bar__content) {
  background-color: $globalColor;
}
.back-btn{
  font-size: 24px;
  color: black!important;
}
</style>